<template>
	<view class="">
		<u-tabs :list="list" :is-scroll="false" :current="current" bar-width="50" active-color="#3CC871"
			@change="change"></u-tabs>
		<view v-if="current == 0">
			<template v-if="dataflag">
				<uni-collapse  accordion>
					<uni-collapse-item 
						:title="group.money + '元购物券 (' + group.count + '张)'" 
						v-for="(group,index) in data" 
						:key="index" 
						class="row-collapse"
						:open="index === 0"
					>
						<view v-for="(item,index) in group.list" :key="index" class="main-item">
							<view class="main">
								<view class="main-left">
									<div class="left-info">
										<div class="tx">
											<div class="rmb">¥</div>
											{{item.money}}
										</div>
										<button class="zengsong" open-type="share" @click="setParams(item.id)" size="mini">赠送</button>
									</div>
								</view>
								<view class="main-right">
									<view class="row1">
										<view class="info-col">
											<div class="main-title">{{type == 1?'绿色支付金':'购物券'}}</div>
											<div class="main-time">{{item.end_time?countdown(item.end_time):'30天有效'}}</div>
										</view>
										<view class="btn-col">
											<button class="btn" @click="GotoPay(item)">使用</button>
										</view>
									</view>
									<view class="line"></view>
									<view class="row2">
										<div class="time-col">
											{{item.order.pay_time}} {{ item.shop.name }}消费
										</div>
										<div class="right">
											{{item.order.pay_money}}元
										</div>
									</view>
								</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
				
			</template>
			<template v-else>
				<view style="width: 100%;text-align: center;">
					暂无更多~
				</view>
			</template>
		</view>

		<view v-if="current == 1">
			<template v-if="dataflag">
				<uni-collapse  accordion>
					<uni-collapse-item 
						:title="group.money + '元购物券 (' + group.count + '张)'" 
						v-for="(group,index) in data" 
						:key="index" 
						class="row-collapse"
						:open="index === 0"
					>
						<view v-for="(item,index) in group.list" :key="index" class="main-item">
							<view class="main">
								<view class="main-left">
									<div class="left-info">
										<div class="tx">
											<div class="rmb">¥</div>
											{{item.money_all}}
										</div>
										<button class="zengsong" size="mini">赠送</button>
									</div>
								</view>
								<view class="main-right">
									<view class="row1">
										<view class="info-col">
											<div class="main-title">{{type == 1?'绿色支付金':'购物券'}}</div>
											<div class="main-time">该券已使用</div>
										</view>
										<view class="btn-col">
											<button class="btn" style="background-color: #999999;">已使用</button>
										</view>
									</view>
									<view class="line"></view>
									<view class="row2">
										<div class="time-col">
											{{item.order.pay_time}} {{ item.shop.name }}消费
										</div>
										<div class="right">
											{{item.order.pay_money}}元
										</div>
									</view>
								</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</template>
			<template v-else>
				<view style="width: 100%;text-align: center;">
					暂无更多~
				</view>
			</template>
		</view>
		<view v-if="current == 2" >
			<template v-if="dataflag">
				<uni-collapse  accordion>
					<uni-collapse-item 
						:title="group.money + '元购物券 (' + group.count + '张)'" 
						v-for="(group,index) in data" 
						:key="index" 
						class="row-collapse"
						:open="index === 0"
					>
						<view v-for="(item,index) in group.list" :key="index" class="main-item">
							<view class="main">
								<view class="main-left" style="background: #AEB2B5">
									<div class="left-info">
										<div class="tx">
											<div class="rmb">¥</div>
											{{item.money_all}}
										</div>
										<button class="zengsong" size="mini">赠送</button>
									</div>
								</view>
								<view class="main-right" style="background: #F5F5F5">
									<view class="row1">
										<view class="info-col">
											<div class="main-title">{{type == 1?'绿色支付金':'购物券'}}</div>
											<div class="main-time" style="color: #D1D1D1">该券已过期</div>
										</view>
										<view class="btn-col">
											<button class="btn" style="background:#D1D1D1 ">已过期</button>
										</view>
									</view>
									<view class="line"></view>
									<view class="row2">
										<div class="time-col">
											{{item.order.pay_time}} {{ item.shop.name }}消费
										</div>
										<div class="right">
											{{item.order.pay_money}}元
										</div>
									</view>
								</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</template>
			<template v-else>
				<view style="width: 100%;text-align: center;">
					暂无更多~
				</view>
			</template>
		</view>
		<view class="bottom-title" v-if="type == 0">
			1.此券为联盟商家赠送给消费者的购物券,仅限用于云仓优送线上商城兑换商品使用;<br>
			2.此券可在云仓优送线上商城全额使用，无门槛兑换商城内所有商品，不可提现，不可反复使用。<br>
			3.此券券额未使用完，券上余额可继续使用;<br>
			4.此券自领取之日起，60日内有效，超期将被系统自动收回。
		</view>
		<view class="bottom-title" v-else>
			1.此币为线上商城赠送给消费者的支付金,仅限用于云仓优送线下店铺抵扣使用;<br>
			2.此币可在云仓优送线下店铺全额使用，无门槛抵扣所有商品，不可提现，不可反复使用。<br>
			4.此币自领取之日起，60日内有效，超期将被系统自动收回。
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				zengsong: false,
				list: [{
					name: '未使用',
				}, {
					name: '已使用',
				}, {
					name: '已过期'
				}],
				current: 0,
				data: [],
				dataflag:true,
				type:'',
				imageUrl:'https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/img/Group%202186.png',
				currentShareId:'',
				notify: '/pages/my/getcoupon',
				title:'',
				desc:'',
				shareType:0
			}
		},
		onLoad(option) {
			this.$u.api.describ.getZengsong().then(res =>{
				if(res.code == 1){
					this.zengsong = res.data
				}
			})
			this.getQuan(1,option.type)
			this.type = option.type
			if(option.type == 1){
				uni.setNavigationBarTitle({
					title: '我的支付金'
				});
			}else{
				uni.setNavigationBarTitle({
					title: '我的购物券'
				});
			}
			this.$u.api.describ.getShareIcon().then(res =>{
				if(res.code == 1){
					this.imageUrl = res.data.imageUrl
					this.notify = res.data.url
					this.title = res.data.title
					this.desc = res.data.desc
					this.shareType = res.data.type
				}
			})




		},
		
		methods: {

			countdown(end_time){
				let now = new Date().getTime();
				let end = new Date(end_time).getTime();
				let time = end - now;
				let days = Math.floor(time / (1000 * 60 * 60 * 24));
				let hours = Math.floor((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
				let minutes = Math.floor((time % (1000 * 60 * 60)) / (1000 * 60));
				let seconds = Math.floor((time % (1000 * 60)) / 1000);
				return days + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒';
			},
			setParams(id){
				this.currentShareId = id
			},

			onShareAppMessage(res) {
				if (res.from === 'button') {
					console.log(res.target)
				}
				return {
					title: this.title,
					path: this.notify + '?id=' + this.currentShareId,
					desc: this.desc,
					imageUrl: this.imageUrl,
					type: this.shareType,
					query: {
						id: this.currentShareId
					}
				}
			},
			GotoShare(){
				
			},
			GotoPay() {
				if(this.type == 1){
					uni.switchTab({
						url: '../mall/index'
					})
				}else{
					uni.switchTab({
						url: '../shop/index'
					})
				}
			},
			getQuan(state,type) {
				let obj = {
					type,
					state
				}
				this.$u.api.index.getQuan(obj).then(res => {
					if (res.code == 1) {
						// 按金额分类，统计每个金额的总金额和购物券数量
						let grouped = {};
						res.data.forEach(item => {
							
							let key = state==1? item.money:item.money_all;
							
							if (!grouped[key]) {
								grouped[key] = {
									money: state==1? item.money:item.money_all,
									totalMoney: 0,
									count: 0,
									list: []
								};
							}
							grouped[key].totalMoney += Number(state==1? item.money:item.money_all);
							grouped[key].count += 1;
							grouped[key].list.push(item);
						});
						// 将item.order.pay_time只保留日期部分（天）
						Object.values(grouped).forEach(group => {
							group.list.forEach(item => {
								
								if (item.order && item.order.pay_time) {
									// 假设pay_time格式为 'YYYY-MM-DD HH:mm:ss'，只取前10位
									item.order.pay_time = item.order.pay_time.substring(0, 10);
								}
							});
						});
						console.log(grouped)
						// 按count倒序排序
						this.data = Object.values(grouped).sort((a, b) => b.count - a.count);
						this.dataflag = true
						// 触发每秒倒计时
						// 清除之前的计时器，防止叠加
						if (this.timer) {
							clearInterval(this.timer);
						}
						this.timer = setInterval(() => {
							this.data.forEach(item => {
								item.list.forEach(item => {
									item.end_time = this.subtractOneSecond(item.end_time)
								})
							})
						}, 1000)

					}else{
						this.dataflag = false
					}
				}).catch(req =>{
					this.dataflag = false
				})
			},
			 subtractOneSecond(timeStr) {
				// 将时间字符串转换为Date对象
				const date = new Date(timeStr);
				
				// 减去1秒（1000毫秒）
				date.setTime(date.getTime() - 1000);
				
				// 格式化回原有的字符串格式
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			change(index) {
				this.current = index;
				if(this.type == 1){
					if (index == 0) {
						this.getQuan(1,1)
					} else if (index == 1) {
						this.getQuan(2,1)
					} else {
						this.getQuan(3,1)
					}
				}else{
					if (index == 0) {
						this.getQuan(1,0)
					} else if (index == 1) {
						this.getQuan(2,0)
					} else {
						this.getQuan(3,0)
					}
				}
			},
		}
	}
</script>

<style>
    .row-collapse{
		margin-top: 30rpx;
		height: auto;
		min-height: 104rpx;
		position: relative;
		display: flex;
		justify-content: center;		
	}

	.uni-collapse-item__title.uni-collapse-item-border {
		background: white;
		border-bottom: 1px solid #ebeef5;
	}

	.uni-collapse-item{
		width: 750rpx;
		background-color: #F5F5F5;
	}
	.main-item {
		width: 100%;
		display: flex;
		justify-content: center;
		background-color: white;
	}
	.main {
		width: 690rpx;
		height: 214rpx;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/img/Subtract.png') center/cover;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		position: relative;
		background-color: #DDF9ED;
		display: flex;
		overflow: hidden;
	}

	.main-left {
		position: relative;
		width: 212rpx;
		height: 214rpx;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/img/Group%202759.png') center/cover;
		background-color: #1DC57C;
		border-radius: 20rpx 0 0 20rpx;
		border-right: 0;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.main-right {
		flex: 1;
		background-color: #DDF9ED;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.main .row1{
		display: flex;		
		justify-content: space-between;
		width: 100%;
	}
    
	.row1>.info-col{
		display: flex;
		flex-direction: column;
	}

	.uni-collapse-item__title-text{
		font-size: 32rpx;
		font-weight: bold;
		
	}
	

	.info-col .main-time{
		margin-top: 20rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #FF9823;
	}

	.row1 .btn{
		width: 128rpx;
		height: 52rpx;
		background-color: #36BE6A;
		color: white;
		font-size: 24rpx;
		border-radius: 28rpx;
		margin-left: auto;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.line{
		width: 100%;
		height: 0; 
		border-bottom: 2rpx dashed #B7E3D0; 
		margin: 26rpx 0;
		
	}
	
	.row2{
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-top: 16rpx;
	}

	.row2>.time-col{
		font-size: 22rpx;
		color: #999999;
		max-width: 288rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.row2>.right{
		font-size: 24rpx;
		color: #1DC57C;
	}

	.main-left::after {
		content: "";
		position: absolute;
		top: 0;
		right: -2rpx;
		width: 10rpx;
		height: 100%;
		z-index: 2;
		pointer-events: none;
		/* 圆形波浪线效果 */
		background: 
			repeating-radial-gradient(
				circle at 7rpx 9rpx,
				#DDF9ED 0rpx,
				#DDF9ED 7rpx,
				transparent 7rpx,
				transparent 18rpx
			);
		background-size: 14rpx 18rpx;
	}

	.main-left>.left-info{
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tx {
		color: white;
		display: flex;
		align-items: center;
		font-size: 60rpx;
		
	}

	.zengsong{
		width: 128rpx;
		height: 52rpx;
		background:none;
		color: white;
		font-size: 28rpx;
		border-radius: 28rpx;
		border: solid 1rpx white;
	}

	.rmb{
		font-size: 28rpx;
	}

	.tx1 {
		width: 100%;
		height: 18rpx;
		position: absolute;
		bottom: 48rpx;
		text-align: center;
		line-height: 18rpx;
		font-size: 20rpx;
		color: white;
	}

	.main-title {
		width: 160rpx;
		height: 32rpx;
		top: 28rpx;
		left: 214rpx;
		font-size: 32rpx;
		color: rgba(54, 57, 65, 1);
		font-weight: bold;
	}


	.main-bottom {
		width: 96rpx;
		height: 22rpx;
		left: 214rpx;
		bottom: 30rpx;
		font-size: 24rpx;
		color: rgba(161, 161, 161, 1);
	}

	.main-img {
		width: 26rpx;
		height: 26rpx;
		position: absolute;
		bottom: 25rpx;
		left: 320rpx;
	}

	.main-btn {
		width: 160rpx;
		height: 58rpx;
		position: absolute;
		top: 68rpx;
		right: 40rpx;
		border-radius: 29rpx;
		background-color: rgba(54, 190, 106, 1);
		color: white;
		font-size: 24rpx;
		text-align: center;
		line-height: 58rpx;
	}

	.bottom-title {
		width: 694rpx;
		height: 166rpx;
		margin-left: 28rpx;
		margin-top: 30rpx;
		font-size: 24rpx;
		color: rgba(157, 157, 157, 1);
	}

	.item {
		margin-top: 20rpx;
	}
</style>